<template>
	<view class="goodsList">
		<view class="left">
			<text class=".ellipsis_1" @click="data.obj.categoryId = item.id,data.obj.pageNo = 1,requstList()"
				:class="data.obj.categoryId == item.id?'active':''" v-for="(item,index) in data.topArr"
				:key="index">{{item.categoryName}}</text>
		</view>
		<view class="right">
			<scroll-view @refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower"
				:refresher-triggered="data.refresherBool" :refresher-enabled="true" scroll-y="true">
				<view @tap="handeClick(item)" class="showItem" v-for="(item,index) in data.result.list" :key="index">
					<view class="left">
						<text>{{item.sellType.name}}</text>
						<image v-if="item.mainPictures[0]"
							:src="data.httpUrl+'/app/file/viewFile?fileId='+item.mainPictures[0]" mode="aspectFill">
						</image>
					</view>
					<view class="right">
						{{item.productName}}
						<text>月售：{{item.sellCount}}</text>
						<view v-if="item.hasPreferential.value=='Y'">
							<text>{{item.preferentialPrice.split('.')[0]}}</text>
							<text>.{{item.preferentialPrice.split('.')[1]}}</text>
							<text
								style="text-decoration:line-through;">￥{{item.price}}</text>
						</view>
						<view v-else>
							<text>{{item.price.split('.')[0]}}</text>
							<text>.{{item.price.split('.')[1]}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue';
	import { listCategoryByStoreId, pageProduct } from '@/utils/api/goods'
	const props = defineProps(['storeId'])
	const data = reactive<any>({
		index: 0,
		httpUrl: getApp().globalData.baseUrl,
		topArr: [],
		info: {},
		result: {},
		obj: { pageNo: 1, pageSize: 10, storeId: props.storeId }
	})
	const refresherrefresh = () => {
		data.refresherBool = true;
		data.obj.pageNo = 1;
		requstList()
	}
	listCategoryByStoreId({ data: { storeId: props.storeId } }).then((res) => {
		if (res.data.length) {
			data.obj.categoryId = res.data[0].id
		}
		data.topArr = res.data;
		requstList();
	})

	const requstList = () => {
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		if (data.obj.pageNo == 1) {
			data.result.list = [];
		}
		pageProduct({ data: data.obj }).then((res) => {
			res.data.list.map((item) => {
				item.preferentialPrice = item.preferentialPrice +''
				item.price = item.price +''
				if (item.preferentialPrice.indexOf('.') == -1) {
					item.preferentialPrice = item.preferentialPrice + '.00'
				}
				if (item.price.indexOf('.') == -1) {
					item.price = item.price + '.00'
				}
			})
			data.refresherBool = false;
			res.data.list = [...data.result.list, ...res.data.list];
			data.result = res.data;
			uni.hideLoading()
		})
	}
	const handeClick = (item) => {
		uni.navigateBack();
		uni.$emit('lifestyleProducts', item.spuId)
	}
	const scrolltolower = () => {
		if (data.result.total != data.result.list.length) {
			data.obj.pageNo += 1;
			requstList()
		}
	}
	const navTo = (url : string) => {
		uni.navigateTo({
			url
		})
	}
	
</script>

<style lang="scss">
	.goodsList {
		flex: 1;
		display: flex;
		margin-top: 8rpx;

		>.left {
			background: #FFFFFF;
			width: 206rpx;
			display: flex;
			flex-direction: column;

			text {
				line-height: 106rpx;
				width: 206rpx;
				padding-left: 24rpx;
				color: #8C8C8C;
			}

			.active {
				border-left: 3rpx solid #6B64D3;
				color: #6B64D3;
				background: #F4F6FA;
			}
		}

		>.right {
			flex: 1;
			width: 0;
			display: flex;
			flex-direction: column;
			margin: 0 12rpx 16rpx 12rpx;

			scroll-view {
				flex: 1 auto;
				height: 0;
				overflow: auto;
			}

			.showItem {
				margin-top: 16rpx;
				display: flex;
				padding: 20rpx;
				background: #fff;
				border-radius: 20rpx;

				.left {
					position: relative;
					width: 128rpx;
					height: 128rpx;
					border-radius: 16rpx;
					background: #ccc;
					margin-right: 16rpx;

					image {
						width: 128rpx;
						height: 128rpx;
						border-radius: 16rpx;
					}

					>text {
						position: absolute;
						left: 0;
						top: 0;
						z-index: 9;
						display: inline-block;
						padding: 3rpx 12rpx;
						border-radius: 16rpx 0 16rpx 0;
						background: linear-gradient(223deg, #152252 0%, #18174F 100%);
						box-shadow: inset -1rpx -1rpx 4rpx 0rpx rgba(160, 255, 255, 0.3);
						color: #FFEDCA;
						font-size: 20rpx;

					}
				}

				.right {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 32rpx;

					>text {
						font-size: 24rpx;
						color: #8C8C8C;
					}

					view {
						display: flex;
						align-items: flex-end;

						&:before {
							content: '￥';
							display: inline-block;
							font-size: 24rpx;
							color: #FF5233;
						}

						text:nth-of-type(1) {
							font-size: 32rpx;
							color: #FF5233;
							position: relative;
							top: 2rpx;
						}

						text:nth-of-type(2) {
							font-size: 24rpx;
							color: #FF5233;
						}

						text:nth-of-type(3) {
							font-size: 24rpx;
							color: #8C8C8C;
							margin-left: 5rpx;
							text-decoration: line-through;
						}
					}
				}
			}
		}
	}
</style>